<template>
  <div>
    <div class="index-todo-split">
      <span>事件跟踪</span>
      <span v-if="total > 0"
            @click="$router.push('todo')">全部（{{total}}） ></span>
    </div>
    <van-pull-refresh v-model="refreshing"
                      @refresh="onRefresh"
                      :success-duration="500"
                      :success-text='`刷新成功，加载${items.length} 条记录`'
                      :style="{'min-height': '100vh - 322px'} ">
      <van-list v-model:loading="loading"
                v-model:error="error"
                :finished="finished"
                finished-text="没有更多了"
                error-text="请求失败，点击重新加载"
                @load="load">
        <list-card v-for="(todo, index) in items"
                   :key="index"
                   :title="`[${todo.moduleName}]  ${todo.title}`"
                   :rightDescription="todo.checkStatus"
                   :linked="true"
                   :leftIconSrc="todo.img"
                   @click="$router.push({name: todo.moduleId + 'Detail', query: {id: todo.dataId}})">
          <template #content>
            <span>{{formatDate(todo.lastEditDate)}}</span>
          </template>
        </list-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>

import { toRefs, computed, watch } from "vue"
import ListCard from '@/components/ListCard.vue'
import { usePullRefresh } from '@/hooks/usePullRefresh.js'
import { indexTodo } from "@/api/request/basic"
import { dateFormat } from "@/assets/js/common"
import { useStore } from 'vuex'


export default {
  components: { ListCard },

  setup () {
    const { state, load, onRefresh, initPullRefresh } = usePullRefresh()
    initPullRefresh({ request: indexTodo })
    const formatDate = computed(() => {
      return (date) => {
        return dateFormat(new Date(date), 'yyyy-mm-dd')
      }
    })
    const store = useStore()

    watch(
      () => store.getters.currentRoleName,
      (roleName, preRoleName) => {
        onRefresh()
      },
    )
    return {
      ...toRefs(state),
      load,
      onRefresh,
      formatDate
    }
  }
}
</script>

<style scoped>
.index-todo-split {
  padding: 8px 16px;
  background: #f7f7f7;
  box-sizing: border-box;
  color: #666666;
  height: 32px;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;
}
.van-pull-refresh {
  margin-bottom: 44px;
  min-height: calc(100vh - 44px - 42px - 205px - 31px - 48px) !important;
}
</style>
